<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--统配【合理】 */
			*{
				font: 16px 微软雅黑;
				/* 无序列表：有样式--“去列表项样式” */
				list-style-type: none;
				/* 无序列表去全部样式 --去列表项 list-style-type;
										list-style-position
										list-style-image
										*/
				list-style: none;
				text-decoration: none;
				margin: 0;
				padding: 0;
			}
			/* 左栏效果
				1.左栏空间区域 235*450 背景颜色
				2.左栏区域内容【li】 加权 235*50 相对定位---挂靠点【固定位置】
				3.每一个区域内容【li】 加移动上去改背景颜色
				4.左栏弹出框:400*450 1px边框 绝对定位 微调
			 */
			aside{
				width: 235px;
				height: 450px;
				background: #ffe1e1;
				margin: 0 50px;
			}
			aside ul.sidebar li{
				width: 235px;
				height: 50px;
				position: relative;
				text-align: center;
				line-height: 50px;
			}
			aside ul.sidebar .out{
				width: 400px;
				height: 450px;
				border: 1px solid red;
				position: absolute;
				left: 285px;
				
			}
			.sidebar li:hover{
				color: #cbc9ff;
			}
		</style>
	</head>
	<body>
		<!-- html结构 结构化标记 aside元素 针对：左栏 广告，有利于seo优化
		之前通过div+id起名方式 【缺点：繁琐，定义起名】
		-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框结构 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家居</li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
		</aside>
	</body>
</html>